<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/security">
<head>
    <!-- start: Meta -->
    <meta charset="utf-8">
    <title>My Survey</title>
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-responsive.min.css}" rel="stylesheet">
    <link id="base-style" th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/jquery.datetimepicker.min.css}" rel="stylesheet">
    <link id="base-style-responsive" th:href="@{/css/style-responsive.css}" rel="stylesheet">
    <!-- end: CSS -->
    <!-- start: Favicon -->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!-- end: Favicon -->
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" th:href="@{/index}"> <span>My Survey Dashboard</span></a>

            <!-- start: Header Menu -->
            <div class="btn-group pull-right">
                <!-- start: User Dropdown -->
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="icon-user"></i>&nbsp;<span sec:authentication="name" class="hidden-phone hidden-tablet"> admin</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="document.getElementById('logout').submit();">Logout</a></li>
                    <form th:action="@{/logout}" id="logout" method="post">
                    </form>
                </ul>
                <!-- end: User Dropdown -->
            </div>
            <!-- end: Header Menu -->

        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <!-- start: Main Menu -->
        <div class="span2 main-menu-span">
            <div class="nav-collapse sidebar-nav">
                <ul class="nav nav-tabs nav-stacked main-menu">
                    <li class="nav-header hidden-tablet">Navigation</li>
                    <li><a th:href="@{/index}"><i class="icon-home"></i><span
                            class="hidden-tablet"> Dashboard</span></a>
                    </li>
                    <li><a th:href="@{/my-surveys}"><i class="icon-th"></i><span
                            class="hidden-tablet"> My Surveys</span></a></li>
                    <li><a sec:authorize="hasRole('ROLE_ADMIN')" th:href="@{/survey/list}"><i class="icon-edit"></i><span
                            class="hidden-tablet"> Manage Surveys</span></a></li>
                    <li><a sec:authorize="hasRole('ROLE_ADMIN')" th:href="@{/user/list}"><i
                            class="icon-list-alt"></i><span class="hidden-tablet"> Manage Users</span></a>
                    </li>

                </ul>
            </div><!--/.well -->

            <noscript>
                <div class="alert alert-block span10">
                    <h4 class="alert-heading">Warning!</h4>
                    <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>
                        enabled to use this site.</p>
                </div>
            </noscript>
        </div><!--/span-->
        <!-- end: Main Menu -->
        <div id="content" layout:fragment="content">
            <!-- start: Content -->
        </div>
    </div>
</div>
<div>
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/jquery-migrate-1.0.0.min.js}"></script>
    <script th:src="@{/js/jquery-ui-1.10.0.custom.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/jquery.cookie.js}"></script>
    <script th:src="@{/js/fullcalendar.min.js}"></script>
    <script th:src="@{/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/js/excanvas.js}"></script>
    <script th:src="@{/js/jquery.flot.min.js}"></script>
    <script th:src="@{/js/jquery.flot.pie.min.js}"></script>
    <script th:src="@{/js/jquery.flot.stack.js}"></script>
    <script th:src="@{/js/jquery.flot.resize.min.js}"></script>
    <script th:src="@{/js/jquery.chosen.min.js}"></script>
    <script th:src="@{/js/jquery.uniform.min.js}"></script>
    <script th:src="@{/js/jquery.cleditor.min.js}"></script>
    <script th:src="@{/js/jquery.noty.js}"></script>
    <script th:src="@{/js/jquery.elfinder.min.js}"></script>
    <script th:src="@{/js/jquery.raty.min.js}"></script>
    <script th:src="@{/js/jquery.iphone.toggle.js}"></script>
    <script th:src="@{/js/jquery.uploadify-3.1.min.js}"></script>
    <script th:src="@{/js/jquery.gritter.min.js}"></script>
    <script th:src="@{/js/jquery.imagesloaded.js}"></script>
    <script th:src="@{/js/jquery.masonry.min.js}"></script>
    <script th:src="@{/js/jquery.datetimepicker.full.min.js}"></script>
    <script th:src="@{/js/custom.js}"></script>
    <script layout:fragment="extrascript"></script>
</div>
</body>
</html>